<template>
   <div class="pre-order">
       <h1>确认订单</h1>
          <!-- 表格 -->
    <jw-table
    :tableData="tableData"
    :columns="columns"
    :border="false"
    :tableLoading="tableLoading">
    <!-- 产品名称 -->
  <template v-slot:productName="{row}">
    <img :src="row.imageUrl" style="vertical-align:middle" height="20" alt="">
    &nbsp;
    <b style="color:red">{{row.productName}}</b><br>
    <b>{{row.description}}</b>
  </template>
  <!-- 产品数量 -->
  <template v-slot:quantity="{row}">
    <el-input-number v-model="quantity" @change="handleCountChange(row.price)" :min="1" :max="row.inventory+1" label="描述文字">

    </el-input-number>
  </template>
  <!-- 总价格 -->
  <template v-slot:total>
      <b style="color:red;font-size:20px">{{tableTotal}}元</b>
  </template>
</jw-table>
    <!-- 确认订单的按钮 -->
    <div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title"
						data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price"
						style="color: rgb(255, 80, 0)">{{tableTotal}}</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">{{desc}}</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{userInfo.nickname}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button
                @click="commitOrder"
				type="danger">提交订单
              </el-button>
			</div>
		</div>
   </div>
</template>
<script setup>
import jwTable from "@/components/jwTable/index.vue"
import * as api from '@/api/product'
import * as payApi from "@/api/pay"
import {useRoute,useRouter} from "vue-router"
import {ref,onMounted} from 'vue'
import {useUser} from "@/store/users"
import {storeToRefs} from "pinia"
import {ElMessage} from "element-plus"
//pinia的用户信息
let userStore=useUser()
let {userInfo}=storeToRefs(userStore)
//当前路由对象
let route=useRoute()
//最大的路由对象
let router=useRouter()
//业务
//1.获取上一个页面传递过来的query参数，获取当前的产品信息
let {product_id}=route.query
//2.展示产品信息
//根据商品的id获取商品的详情，发送请求
let desc=ref("")
let getProduct=async()=>{
    tableLoading.value=true;
    try{
        let res=await api.getProductApi(product_id);
        tableData.value=res.data.data
        tableLoading.value=false
        //产品的详情，进行赋值，表格下面的结构使用
        desc.value=res.data.data[0].description
        //第一次拿到了商品，所以对total进行初次赋值操作，可以将数据中的price作为total的首次参数
        tableTotal.value=res.data.data[0].price
        console.log(res)
    }catch(e){
        tableLoading.value=false
    }
}
onMounted(()=>{
    getProduct()
})
//声明一个表格的加载动画
let tableLoading=ref(false)
//声明一个表格数据
let tableData=ref([])
//声明一个列对象，用于展示表格数据
let columns=ref([
    {
        label:"产品名称",
        prop:"productName"
    },
    {
        label:"单价",
        prop:"price"
    },
    {
        label:"数量",
        prop:"quantity"
    },
    {
        label:"总价格",
        prop:"total"
    },
])
//声明计算器的数量和
let quantity=ref(1)
//计算总价格（只是给用户看的，并不能决定最终付款的价格）
let tableTotal=ref("0.00")
let handleCountChange=(price)=>{
    tableTotal.value=(quantity.value*price).toFixed(2)
}
//3.进行下单
//支付核心流程或者关键字
//下单：传递商品id和商品数量
let commitOrder=async()=>{
    //1.调用下单接口，传递和产品的数量
    try{
      let res=await payApi.preOrderApi(product_id,quantity.value)
      //2.跳转页面，跳转到支付页面 pay/payment
      router.push({path:"/pay/payment",query:{order_id:res.data.order_id}})
      ElMessage({
          type:'success',
          message:res.data.msg
      })
    }catch(e){
        console.log(e)
    }
    
    //3.payment页面需要拉取订单详情，并且发起支付
}
//支付：传递订单id
</script>
<script>
   export default{
      meta:{
          name:"确认订单"
      }
   }
</script>
<style lang="scss" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 100px 0 100px;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}
</style>